<template>
    <div class="hotel_main" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="hotel_container">
            <div class="hotel_rank flexbox flexcenter">
                <div class="flexbox flexcenter rank_ml">
                    <span class="rank_text">行政区</span>
                    <el-select v-model="queryInfo.region" placeholder="行政区" size="small" @change="getDataList(1)">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option label="钱塘区" :value="1"></el-option>
                        <el-option label="西湖区" :value="2"></el-option>
                        <el-option label="拱野区" :value="3"></el-option>
                        <el-option label="上城区" :value="4"></el-option>
                        <el-option label="萧山区" :value="5"></el-option>
                        <el-option label="滨江区" :value="6"></el-option>
                    </el-select>
                </div>
                <div class="flexbox flexcenter rank_ml">
                    <span class="rank_text">来源</span>
                    <el-select v-model="queryInfo.source" placeholder="来源" size="small" @change="getDataList(1)">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option label="美团" :value="1"></el-option>
                        <el-option label="携程" :value="2"></el-option>
                        <el-option label="途家" :value="3"></el-option>
                        <el-option label="爱彼迎" :value="4"></el-option>
                    </el-select>
                </div>
                <div class="flexbox flexcenter rank_ml">
                    <span class="rank_text">排序</span>
                    <el-select v-model="region" placeholder="排序" size="small">
                        <el-option label="默认排序" :value="0"></el-option>
                        <el-option label="价格，从低到高" :value="1"></el-option>
                        <el-option label="价格，从高到低" :value="1"></el-option>
                    </el-select>
                </div>
                <div class="flexbox flexcenter rank_ml">
                    <span class="rank_text">联系方式</span>
                    <el-select v-model="queryInfo.mobile" placeholder="联系方式" size="small" @change="getDataList(1)">
                        <el-option label="默认" :value="0"></el-option>
                        <el-option label="只看有联系方式的" :value="1"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="hotel_list">
                <div class="hotel_item" v-for="item in tableData" :key="item.id" @click="toDetails(item.id)">
                    <div class="hotel_img">
                        <img :src="item.cover_image" alt="">
                    </div>
                    <div class="hotel_title">{{item.title}}</div>
                    <div class="hotel_info">
                        <el-row type="flex" justify="space-between">
                            <el-col :span="6">
                                <div class="hotel_region">地区:{{item.region}}</div>
                            </el-col>
                            <el-col :span="6">
                                <div class="hotel_source">来源:{{item.source}}</div>
                            </el-col>
                            <el-col :span="6">
                                <div class="hotel_pirce">价格:￥<span class="red">{{item.price}}</span></div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.page_size" :page-sizes="[12, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading:false,
            queryInfo: {
                region: 0,
                source: 0,
                mobile: 0,
                page: 1,
                page_size: 12,
                group_by: "",
                order_by: "",
                sort: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "http://47.119.175.47:4450/api/get_product",
                this.queryInfo,
                {
                    headers: {
                        "content-type": "application/x-www-form-urlencoded",
                    },
                }
            );
            if (res.code !== 200) {
                this.disabled = false;
                this.$message.error(res.msg);
            } else {
                this.loading = false;
                this.total = res.count;
                this.tableData = res.data;
            }
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.page_size = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },

        // 跳转
        toDetails(id) {
            this.$router.push({
                path: "/hoteldetails",
                query: {
                    id: id,
                },
            });
        },
    },
};
</script>

<style scoped>
.hotel_main {
    overflow: auto;
    height: 100%;
}
.hotel_container {
    width: 1200px;
    margin: 0 auto;
}
.hotel_rank {
    padding-top: 20px;
}
.rank_text {
    font-size: 14px;
    color: #17233d;
    margin-right: 10px;
}
.rank_ml {
    margin-right: 10px;
}
.hotel_list {
    overflow: hidden;
}
.hotel_item {
    width: 360px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    float: left;
    margin-right: 20px;
    margin-top: 20px;
    cursor: pointer;
}
.hotel_title {
    font-size: 16px;
    color: #17233d;
    margin-top: 10px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hotel_img {
    width: 360px;
}
.hotel_img img {
    display: block;
    width: 100%;
}
.hotel_info {
    margin-top: 10px;
    font-size: 14px;
    color: #17233d;
}
.red {
    color: #ff4d6a;
    font-weight: bold;
}
</style>
